<template>
	<view>
		<view v-for="(val,key) in list">
			<title-bar :title="key"></title-bar>
			<view class="time-record" v-for="(item,index) in val">
				<view class="flex-align-center">
					<view class="empty-circle"></view>
					<text class="ml10">{{item.shortTime}}</text>
				</view>
				<view class="content"
					:style="{'border-left':'1px dotted rgba(201, 211, 233, '+(index < val.length-1 ? 1 : 0)+')'}">
					<view class="wrapper ptb30">
						<slot :data="item"></slot>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import TitleBar from "@/components/title-bar";
	export default {
		components: {
			TitleBar,
		},
		props: {
			list: {
				type: Object|Array,
				default: () => {
					return {}
				}
			}
		}
	}
</script>

<style lang="scss">
	.time-record {
		.empty-circle {
			width: 16upx;
			height: 16upx;
			border-radius: 50%;
			border: 2upx solid #C9D3E9;
		}

		.content {
			margin-left: 8upx;
		}

		.wrapper {
			margin-left: 20upx;
		}
	}
</style>
